@import "../../themes/ionic.globals";

// Content
// --------------------------------------------------

ion-content {
  position: relative;
  top: 0;
  left: 0;
  display: block;

  width: 100%;
  height: 100%;
}

.ion-page > ion-content {
  position: absolute;
}

a {
  color: $link-color;
}


// Scrollable Content
// --------------------------------------------------

.scroll-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $z-index-scroll-content;
  display: block;

  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

ion-content.js-scroll > .scroll-content {
  position: relative;

  min-height: 100%;

  overflow-x: initial;
  overflow-y: initial;
  -webkit-overflow-scrolling: auto;
  will-change: initial;
}

.disable-scroll .ion-page {
  pointer-events: none;
}


// Fixed Content (ion-fixed and ion-fab)
// --------------------------------------------------

.fixed-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
}

[ion-fixed] {
  position: absolute;

  z-index: $z-index-fixed-content;

  transform: translateZ(0);
}


// Content Padding
// --------------------------------------------------

[no-padding],
[no-padding] .scroll-content {
  padding: 0;
}

@mixin content-padding($content-padding) {
  [padding],
  [padding] .scroll-content {
    padding: $content-padding;
  }

  [padding-top],
  [padding-top] .scroll-content {
    padding-top: $content-padding;
  }

  [padding-left],
  [padding-left] .scroll-content {
    padding-left: $content-padding;
  }

  [padding-right],
  [padding-right] .scroll-content {
    padding-right: $content-padding;
  }

  [padding-bottom],
  [padding-bottom] .scroll-content {
    padding-bottom: $content-padding;
  }

  [padding-vertical],
  [padding-vertical] .scroll-content {
    padding-top: $content-padding;
    padding-bottom: $content-padding;
  }

  [padding-horizontal],
  [padding-horizontal] .scroll-content {
    padding-right: $content-padding;
    padding-left: $content-padding;
  }
}


// Content Margin
// --------------------------------------------------

[no-margin],
[no-margin] .scroll-content {
  margin: 0;
}

@mixin content-margin($content-margin) {
  [margin],
  [margin] .scroll-content {
    margin: $content-margin;
  }

  [margin-top],
  [margin-top] .scroll-content {
    margin-top: $content-margin;
  }

  [margin-left],
  [margin-left] .scroll-content {
    margin-left: $content-margin;
  }

  [margin-right],
  [margin-right] .scroll-content {
    margin-right: $content-margin;
  }

  [margin-bottom],
  [margin-bottom] .scroll-content {
    margin-bottom: $content-margin;
  }

  [margin-vertical],
  [margin-vertical] .scroll-content {
    margin-top: $content-margin;
    margin-bottom: $content-margin;
  }

  [margin-horizontal],
  [margin-horizontal] .scroll-content {
    margin-right: $content-margin;
    margin-left: $content-margin;
  }
}
